.main {
  padding: 58px 2.5% 0;

  @include media-breakpoint-up(md) {
    padding: 58px 0 0;
  }
  
  .intro {
    width: 100%;

    @include media-breakpoint-up(md) {
      width: 40%;
    }
  }
  .graphic {
    width: 100%;

    @include media-breakpoint-up(md) {
      width: 55%;
    }

    img {
      max-width: 100%;
      max-height: 320px;

      @include media-breakpoint-up(md) {
        max-height: 560px;
      }
    }
  }
  .description {
    font-weight: 500;
    line-height: 28px;
    margin: 0 0 24px;
    opacity: 0.65;
  }
  .screenshot {
    text-align: center;

    img {
      max-width: 80%;
      margin: 0 auto;

      @include media-breakpoint-up(md) {
        max-width: 360px;
        margin: 0 24px;
      }
    }
  }
  .is-screenshot {
    margin-bottom: 36px;
  }
  .button {
    display: inline-block;
    width: auto;
    text-decoration: none !important;
  }
}
.heading-primary {
  font-family: $ff-alt;
  font-weight: 700;
  font-size: 30px;
  line-height: 38px;

  @include media-breakpoint-up(sm) {
    font-size: 35px;
    line-height: 52px;
  }
}
.heading-secondary {
  display: inline-block;
  font-family: $ff-alt;
  font-weight: 700;
  font-size: 28px;
}
.footer {
  background: $color-white;
  border-top: 1px solid $color-light-grey;
  text-align: center;
  font-size: 15px;
  line-height: 28px;
  font-weight: 500;
  padding: 24px 0;

  p {
    margin: 0;
    color: rgba($color-dark-grey, 0.65);
    
    a {
      color: $color-dark-grey;
      text-decoration: none !important;
      transition: all 0.15s ease-in-out;

      &:hover {
        color: $color-black;
      }
    }
  }
}